<template>
  <div>
    <div class="goodshow">
      <div class="image">
        <el-image
            style="width: 350px; height: 350px"
            :src="this.msg.gimgUrl"
            :preview-src-list="[this.msg.gimgUrl]"
        >
        </el-image>
      </div>
      <el-button
          class="button1"
          type="primary"
          @click="dialogFormVisible = true"
          v-if="
          !this.gisFreeze && this.msg.gcount != 0
        "
      >购买</el-button
      >
      <el-tag class="tag1" type="info" v-if="this.gisFreeze"
      >商品已冻结</el-tag
      >
      <el-tag
          class="tag1"
          type="danger"
          v-if="this.msg.gcount == 0"
      >商品已售罄</el-tag
      >
      <el-card class="box-card" :body-style="{ padding: '0px' }">
        <div style="padding: 14px">
<!--          商品名称： {{ this.$route.query.msg.gname }}-->
          商品名称： {{ this.msg.gname }}
        </div>
        <div style="padding: 14px">
          商品价格：{{ this.msg.gprice }}元
        </div>
        <div style="padding: 14px">
          商品库存：{{ this.msg.gcount }}
        </div>
        <div style="padding: 14px">
          详情介绍：{{ this.msg.gdesc }}
        </div>
      </el-card>
    </div>
    <el-dialog
        title="请输入购买信息"
        :visible.sync="dialogFormVisible"
        :modal="true"
        :close-on-press-escape="true"
        :show-close="true"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="买家姓名">
          <el-input v-model="form.uname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.uphoneNum" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地    址">
          <el-input v-model="form.uaddress" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.ostatus" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "GoodsDetails",
  data() {
    return {
      msg: {},
      dialogFormVisible: false,
      user: "",
      gisFreeze: "",
      form: {
        uname: "",
        uaddress: "",
        uphoneNum: "",
        gid: "",
        gimgUrl: "",
        ostatus: "",
      },
    };
  },
  // beforeRouteEnter(to,from,next){
  //   //query
  //   next(vm => {
  //     vm.msg = JSON.parse(to.query.msg);
  //     console.log(vm.msg);
  //   })
  // },
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.msg = JSON.parse(this.$route.query.msg);
    // this.gimgurl = this.$route.query.msg.gimgUrl;
    // console.log(this.gimgurl);
    console.log("ccc");
    console.log(this.user);
    // console.log(this.msg);
    this.getform();
    this.initGoodInfo();

  },
  methods: {
    initGoodInfo(){
      this.getRequest("/good/onsell/"+this.msg.id).then(resp=>{
        if (resp){
          // this.goodinfo = resp;
          this.gisFreeze = resp.gisFreeze;
        }
      })
    },
    getform() {
      this.form.uname = this.user.unickName;
      this.form.uaddress = this.user.uaddress;
      this.form.uphoneNum = this.user.uphoneNum;
      this.form.gid = this.msg.id;
      this.form.gimgUrl = this.msg.gimgUrl;
      console.log(this.form);
    },
    onSubmit(form) {
      this.postRequest("/cilentOrder/", this.form).then((resp) => {
        console.log(resp);
        if (resp) {
          console.log("submit!");
          this.dialogFormVisible = false;
          location.reload();
          this.$message({
            message: "提交成功！",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.image {
  background-color: aliceblue;
  position: absolute;
  left: 30%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.button1 {
  position: absolute;
  left: 30%;
  top: 70%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}

.tag1 {
  position: absolute;
  left: 30%;
  top: 55%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}

.box-card {
  width: 480px;
  position: absolute;
  left: 70%;
  top: 24.5%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}
</style>
